<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>企业邮件列表</title>
<script src="<s:url value="/script/jquery-1.7.2.js"/>"></script>
<script src="<s:url value="/script/jquery.form.js"/>"></script>
<script src="<s:url value="/script/jquery.pager.js"/>"></script>
<script src="<s:url value="/script/jquery.quicksearch.js"/>"></script>
<script src="<s:url value="/script/jquery.bgiframe-2.1.2.js"/>"></script>
<script src="<s:url value="/script/jquery.loadmask.js"/>"></script>
<script src="<s:url value="/theme/script/jquery.ui.core.js"/>"></script>
<script src="<s:url value="/theme/script/jquery.ui.widget.js"/>"></script>
<script src="<s:url value="/theme/script/jquery.ui.mouse.js"/>"></script>
<script src="<s:url value="/theme/script/jquery.ui.draggable.js"/>"></script>
<script src="<s:url value="/theme/script/jquery.ui.position.js"/>"></script>
<script src="<s:url value="/theme/script/jquery.ui.resizable.js"/>"></script>
<script src="<s:url value="/theme/script/jquery.ui.dialog.js"/>"></script>
<script src="<s:url value="/script/kindeditor-min.js"/>"></script>
<script src="<s:url value="/script/kindeditor_zh_CN.js"/>"></script>
<script type="text/javascript">
	$(function () {
		$("div > input:text").resizable({helper: "ui-state-highlight"});
		$('input#id_search').quicksearch('table tbody tr');
		var options = { 
		        success:   serverBack,   // post-submit callback 
		        dataType:  'text' ,      // 'xml', 'script', or 'json' (expected server response type) 
		        clearForm: true  ,      // clear all form fields after successful submit 
		        resetForm: true  ,      // reset the form after successful submit 
		        //timeout:   60000 ,
		        cache:     false,
		        beforeSubmit : function(){
		        	$("#J_editorDialog").mask("Waiting...");
		        },
		        error:function(response, status, err){
		        	alert(status + "" + err);
		        	$("#J_editorDialog").unmask();
		        	if($('#J_editorDialog').dialog('isOpen')){
						$('#J_editorDialog').dialog('close');
					}
		        }
		    }; 
	    $('#mailForm').ajaxForm(options); 
		initPager();
	});
	
	$(function() {
		$( "#dialog:ui-dialog" ).dialog("destroy");
		$('#J_openDialog').click(function() {
			var editor;
			$('#J_editorDialog').dialog({
				title : '邮件发送',
				width : 1000,
				modal: true,
				dialogClass : "alert",
				position : "center",
				buttons: { "发送": function() {
						$("#m_subject").val($("#d_subject").val());
						$("#m_message").val($("#d_message").val());
						$("#m_content").val(editor.html());
// 						$("#J_editorDialog").mask("Waiting...");
						$('#mailForm').submit();
						//$(this).dialog("close"); 
					} 
				},
				open : function(event, ui) {
					// 打开Dialog后创建编辑器
					editor = KindEditor.create('#editor_id', {
						resizeType : 1
					});
				},
				beforeClose : function(event, ui) {
					// 关闭Dialog前移除编辑器
					if (editor) {
						editor.remove();
					}
				}
			});
		});
	});
	
	//初始化分页组件
	function initPager(){
		var page  = $("#pageNum").val();
		var count = $("#totalPage").val();
		$("#pager").pager({ pagenumber: page, pagecount: count, buttonClickCallback: PageClick });
	}
	
	//ajax重构表格数据
	function reBuildData(params){
		$.ajax({
			type: "POST",
			url:"<s:url value="/info/m_ajaxQuery.action"/>",
			data: params,
			dataType:"json",
			error: function(request) {
			    alert("系统出错 ！");
			},
			success: function(data) {
				var pageNum   = "";
				var pageSize  = "";
				var totalPage = "";
				var totalRows = "";
				//jquery解析map数据         
				$.each(data.pager, function(key, value) {
					if(key == "currentPage"){
						pageNum = value;
					}
					if(key == "pageSize"){
						pageSize = value;
					}
					if(key == "totalPages"){
						totalPage = value;
					}
					if(key == "totalRows"){
						totalRows = value;
					}
				});
// 				alert(pageNum + "|" + pageSize + "|" + totalPage);
				var index = (parseInt(pageNum)-1)*parseInt(pageSize);
				$("#pageNum").val(pageNum);
				$("#totalPage").val(totalPage);
				$("#totalRecords").html(totalRows);
				$("tbody").empty();
				//解析数组          
				$.each(data.list, function(i, item) {
					var tr = "<tr>"+
					"<td><input type=\"checkbox\" name=\"mids\" value=\"" + item.id + "\"/></td>"  + 
					"<td>" + (index+i+1) + "</td>"  + 
					"<td>" + item.contact_info + "</td>" + 
					"<td>" + item.create_time + "</td>"+
					"<td>" + "尚未发送" + "</td>"+
					"</tr>";
					$("tbody").append(tr);
				});
				initPager();
			}
		});
	}
	
	PageClick = function(pageclicked) {
		//重置页面为当前选择值
		$("#pageNum").val(pageclicked);
		var params = $("#searchForm").serialize();
		reBuildData(params);
	};
	
	//全选方法
	function selectAll(cid, name) {
		var check = document.getElementById("" + cid).checked;
		var checkSel = document.getElementsByName("" + name);
		for ( var i = 0; i < checkSel.length; i++) {
			checkSel[i].checked = check;
		}
	}
	
	//form表单ajax回调函数
	function serverBack(responseText, statusText, xhr, $form) {
		$("#J_editorDialog").unmask();
		if($('#J_editorDialog').dialog('isOpen')){
			$('#J_editorDialog').dialog('close');
		}
		if (responseText == "yes") {
			alert("邮件发送成功！");
			//列表记录更新，重新刷新分页
			var params = $("#searchForm").serialize();
			reBuildData(params);
		} else {
			alert("邮件发送失败!");
		}
	}
	
	//切换分页、刷新表格数据
	function chageSize() {
		//重置当前页码为1
		$("#pageNum").val("1");
		var params = $("#searchForm").serialize();
		reBuildData(params);
	}
	
</script>
</head>
<body>
	<form action="#" id="searchForm">
		<fieldset>
			<input type="text" name="search" value="" id="id_search" />
			分页大小：
			<s:select list="#{'20':'20','30':'30','50':'50','100':'100','500':'500','1000':'1000'}" name="pageSize" value="%{pageSize}" theme="simple" onchange="chageSize();"/>
			<input type="hidden" name="pageNum" id="pageNum" value="<s:property value="%{pager.currentPage}"/>"/>
			<input type="hidden" name="totalPage" id="totalPage" value="<s:property value="%{pager.totalPages}"/>"/>
			总记录数：<span id="totalRecords"><s:property value="%{pager.totalRows}"/></span>		
			<input type="button" value="发送邮件" id="J_openDialog"/>
		</fieldset>
	</form>
	
	<form action="<s:url value="/info/m_sendMails.action"/>" name="mailForm" id="mailForm" method="post">
		<table id="table_example">
			<thead>
				<tr>
					<th width="10%"><input type="checkbox" id="checkAll" onclick="selectAll(this.id,'mids');"/>全选</th>
					<th width="20%">序号</th>
					<th width="40%">邮件</th>
					<th width="20%">日期</th>
					<th width="10%">状态</th>
				</tr>
			</thead>
			<tbody id="list">
				<s:if test="mailList != null && mailList.size > 0">
					<s:iterator value="mailList" status="m" id ="mail">
						<tr>
							<td><input type="checkbox" name="mids" value="<s:property value="#mail.id"/>"/></td>
							<td><s:property value="%{#m.count + (pager.currentPage-1)*pager.pageSize}"/></td>
							<td><s:property value="#mail.contact_info"/></td>
							<td><s:date name="#mail.create_time" format="yyyy-MM-dd"/></td>
							<td>
								<s:if test="#mail.is_msend=='1'">发送成功</s:if>
								<s:else>尚未发送</s:else>
							</td>
						</tr>
					</s:iterator>
				</s:if>
				<s:else>
					<tr>
						<td colspan="5">暂无邮件信息！</td>
					</tr>
				</s:else>
			</tbody>
		</table>
		<input type="hidden" id="m_subject" name="subject"/>
		<input type="hidden" id="m_message" name="message"/>
		<input type="hidden" id="m_content" name="content"/>
	</form>	
	<div id="pager" style="margin-bottom:100px;margin-left:300px;"></div>
	<div id="J_editorDialog" style="display:none;">
		主题：<input type="text" id="d_subject" name="d_subject" width="200px"/><br/>
		信息：<input type="text" id="d_subject" name="d_message" width="200px"/><br/>
		<textarea id="editor_id" id="d_subject" name="d_content" style="width:100%;height:200px;"></textarea>
	</div>
</body>
</html>